import React, {Component} from 'react';
import {
    Text, TextInput, TouchableOpacity, View, Alert, StyleSheet, AsyncStorage, FlatList, Image,
    ScrollView
} from 'react-native';
import CountEmitter from './../../utils/event/CountEmitter';
import {BasicStyle} from "../../../style/BasicStyle";
import Spinner from 'react-native-loading-spinner-overlay';
import Toast from '@remobile/react-native-toast';
import FetchUtils from './../../utils/FetchUtils';
import utils from './../../utils/utils';

export default class ShopOrderPay extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: "选择支付方式",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerRight: <TouchableOpacity/>
    });

    constructor(props) {
        super(props);
        this.state = ({
            loadingStatus: false,
            howPay: '',
            sumPrice: '',
        })
    }

    componentDidMount() {
        if (this.props.navigation.state.params) {
            AsyncStorage.getItem("XToken").then((xToken) => {
                let params = {
                    orderId: this.props.navigation.state.params.orderId,
                };
                FetchUtils.getWithHeader(utils.apiUrl + '/order', xToken, params, (res) => {
                    if(res.code === 200){
                        this.setState({
                            sumPrice: res.apiData.shopCarSumPrice
                        });
                    }
                })
            })
        }
    }

    render() {
        return (
            <View style={[BasicStyle.containerView, styles.containerView]}>
                <Spinner visible={this.state.loadingStatus} textContent={""} textStyle={{color: '#FFF'}}/>

                <View style={{
                    height: utils.autoheight(44),
                    backgroundColor: '#FFF',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: utils.autoheight(10),
                }}>
                    <View><Text
                        style={[BasicStyle.commonFontLittleText, {marginLeft: utils.autoWidth(20)}]}>订单总额：</Text></View>
                    <View><Text
                        style={[BasicStyle.commonFontLittleText, {marginRight: utils.autoWidth(20)}]}>￥{utils.toDecimal2(this.state.sumPrice)}</Text></View>
                </View>

                <View style={{flex: 1, justifyContent: 'space-between',}}>
                    <View style={{backgroundColor: '#FFF'}}>
                        <View style={{justifyContent: 'center', height: utils.autoheight(54),}}>
                            <Text style={[BasicStyle.commonFontText, {
                                marginLeft: utils.autoWidth(20),
                            }]}>选择支付方式：</Text>
                        </View>

                        <TouchableOpacity
                            style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                                height: utils.autoheight(54),
                                justifyContent: 'space-between'
                            }} onPress={() => {
                            this.setState({
                                howPay: 'alipay',
                            })
                        }}>
                            <View style={{flexDirection: 'row', alignItems: 'center',}}>
                                <Image style={{
                                    height: utils.autoWidth(40),
                                    width: utils.autoWidth(40),
                                    marginLeft: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(25)
                                }} source={require("./../../../img/alipay.png")}/>
                                <Text style={[BasicStyle.commonFontText]}>支付宝</Text>
                            </View>
                            {this.state.howPay === 'alipay' ?
                                <Image style={{
                                    height: utils.autoWidth(20),
                                    width: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(50)
                                }}
                                       source={require("./../../../img/pay_selected.png")}/>
                                :
                                <Image style={{
                                    height: utils.autoWidth(20),
                                    width: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(50)
                                }}
                                       source={require("./../../../img/pay_unselected.png")}/>
                            }


                        </TouchableOpacity>

                        <TouchableOpacity style={{
                            flexDirection: 'row',
                            height: utils.autoheight(54),
                            alignItems: 'center',
                            justifyContent: 'space-between'
                        }} onPress={() => {
                            this.setState({
                                howPay: 'wxpay',
                            })
                        }}>
                            <View style={{flexDirection: 'row', alignItems: 'center',}}>
                                <Image style={{
                                    height: utils.autoWidth(40),
                                    width: utils.autoWidth(40),
                                    marginLeft: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(25)
                                }} source={require("./../../../img/wechatpay.png")}/>
                                <Text style={BasicStyle.commonFontText}>微信支付</Text>
                            </View>
                            {this.state.howPay === 'wxpay' ?
                                <Image style={{
                                    height: utils.autoWidth(20),
                                    width: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(50)
                                }}
                                       source={require("./../../../img/pay_selected.png")}/>
                                :
                                <Image style={{
                                    height: utils.autoWidth(20),
                                    width: utils.autoWidth(20),
                                    marginRight: utils.autoWidth(50)
                                }}
                                       source={require("./../../../img/pay_unselected.png")}/>
                            }
                        </TouchableOpacity>

                    </View>

                    <TouchableOpacity style={{
                        height: utils.autoheight(60),
                        backgroundColor: '#D0021B',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }} onPress={() => {

                    }}>
                        <Text style={[BasicStyle.commonFontText, {color: '#FFF'}]}>去支付</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    containerView: {
        justifyContent: 'space-between'
    },
});